<template>
	<div class="video-preview-container-mobile">
		<img class="video-preview-close" :src="closeUrl" alt="" @click="close"  />
		<video 
			class="video-preview-video" 
			id="zco-im-preview-video" 
			autoplay 
			webkit-playsinline 
			playsinline 
			x5-playsinline 
			x5-video-player-type="h5" 
			x5-video-orientation="portrait" 
			x5-video-player-fullscreen="false"
			preload="auto"
			controls
			controlsList="nodownload nofullscreen noremoteplayback"
			disablePictureInPicture
			>
			<source :src="videoUrl" type="video/mp4">
		</video>
	</div>
</template>

<script>

export default {
	components: {},
	props: {
		videoUrl: {
			type: String,
			require: true,
			default: ''
		}
	},
	data() {
		return {
			closeUrl: require('../../assets/img/close.png')
		};
	},
	computed: {},
	watch: {},
	created() {},
	mounted() {
		// 获取video元素
		const video = document.getElementById("zco-im-preview-video");
		// 播放视频
		video.play();
	},
	beforeDestroy() {
	},
	methods: {
		close() {
			// 获取video元素
			const video = document.getElementById("zco-im-preview-video");
			// 播放视频
			video.pause();
			this.$emit('close');
		},
		
	}
};
</script>

<style scoped>
/* 公共样式 */
.video-preview-container-mobile {
	width: 100%;
	height: 100%;
	position: fixed;
	top: 0;
	left: 0;
	background-color: #000000a8;
	z-index: 20;
	display: flex;
	justify-content: center;
	align-items: center;
}
.video-preview-video {
	width: 100%;
	height: 100%;
}
.video-preview-close {
	width: 26px;
	height: 26px;
	position: absolute;
	top: 10px;
	right: 15px;
	z-index: 1;
}

</style>
